<template>
  <div
    class="m-alert"
    :style="{textAlign}"
  >
    <i
      class="m-alert__icon"
      :class="icon"
    ></i>
    <span class="m-alert__info">
      <slot></slot>
    </span>
  </div>
</template>

<script>
export default {
  name: "Alert",
  props: {
    icon: {
      type: String,
      default: "iconfont iconfont-8"
    },
    textAlign: {
      type: String,
      default: "left"
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/assets/scss/color";
.m-alert {
  position: relative;
  line-height: 27px;
  .m-alert__icon {
    position: absolute;
    color: $--hint-warn;
    margin-right: 10px;
    font-size: 24px;
  }
  .m-alert__info {
    display: inline-block;
    vertical-align: top;
    color: $--text-major;
    font-size: 17px;
    padding-left: 34px;
  }
}
</style>